<div>
    <form class="form-horizontal bv-form"  role="form"  id="updateForm">
        <fieldset>
            <legend>基本信息</legend>
            <div class="form-group">
                <label class="col-sm-3 control-label">信息名称</label>
                <div class="col-sm-5">
                    <input type="text"  class="form-control" name="life_name">

                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">信息分类</label>
                <div class="col-sm-5">
                    <select class="SearchForm form-control" name="region_name" style="width:200px;height:32px;">
                        {volist name="res" id="vo"}
                        <option value="{$vo.region_id}">{$vo.region_name}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">省</label>
                <div class="col-sm-5">
                    <select class="SearchForm form-control province" name="province"style="width:200px;height:32px;">
                        {volist name="province" id="vv"}
                        <option value="{$vv.district_id}">{$vv.district}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">市</label>
                <div class="col-sm-5">
                    <select class="SearchForm form-control city"  name="city"style="width:200px;height:32px;">
                        <option>不限</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">区</label>
                <div class="col-sm-5">
                    <select class="SearchForm form-control area"  name="area"style="width:200px;height:32px;">
                        <option>不限</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">信息模板</label>
                <div class="col-sm-5">
                    <select class="SearchForm form-control template" name="template" style="width:200px;height:32px;">
                        <option value="1">1张小图(105*77)</option>
                        <option value="2">3张小图(105*77)</option>
                        <option value="3">1张大图(330*165)</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">模板图片</label>
                <div class="col-sm-5">
                    <a href="javascript:;" class="file file1">选择文件
                        <input type="file" name="file[]" id="file1" onchange="aaaa(this);">
                    </a>
                    <a href="javascript:;" class="file file2" style="display:none" id="">选择文件
                        <input type="file" name="file[]" id="file2" onchange="bbbb(this);">
                    </a>
                    <a href="javascript:;" class="file file3"  style="display:none">选择文件
                        <input type="file" name="file[]" id="file3" onchange="cccc(this);">
                    </a>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">预览图</label>
                <div class="col-sm-3 file1_1" id="androimg" style="float:left">
                </div>
                <div class="col-sm-3 file2_2" id="androimg1" style="float:left">
                </div>
                <div class="col-sm-3 file3_3" id="androimg2" style="float:left">
                </div>
            </div>
            <!--start-->
            <div class="form-group">
                <label class="col-sm-3 control-label">详情图片</label>
                <div class="col-sm-8 mww_last_image">
                    <a href="javascript:;" class="file file4">选择文件
                        <input type="file" name="thumb4" class="4" data-param="0" onchange="ddddd(this);" style="float:left">
                    </a>
                    <a href="javascript:;" class="file file5" style="display:none">选择文件
                        <input type="file" name="thumb5" class="5" data-param="0" onchange="ddddd(this);" style="float:left">
                    </a>
                    <a href="javascript:;" class="file file6" style="display:none">选择文件
                        <input type="file" name="thumb6" class="6" data-param="0" onchange="ddddd(this);" style="float:left">
                    </a>
                    <a href="javascript:;" class="file file7" style="display:none">选择文件
                        <input type="file" name="thumb7" class="7" data-param="0" onchange="ddddd(this);" style="float:left">
                    </a>
                    <a href="javascript:;" class="file file8" style="display:none">选择文件
                        <input type="file" name="thumb8" class="8" data-param="0" onchange="ddddd(this);" style="float:left">
                    </a>
                    <a href="javascript:;" class="file file9" style="display:none">选择文件
                        <input type="file" name="thumb9" class="9" data-param="0" onchange="ddddd(this);" style="float:left">
                    </a>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">预览图</label>
                <div class="file1_1" id="androimg4" style="float:left;width:80px;height: 80px;margin-left:10px">
                </div>
                <div class="file2_2" id="androimg5" style="float:left;width:80px;height: 80px;margin-left:10px">
                </div>
                <div class="file3_3" id="androimg6" style="float:left;width:80px;height: 80px;margin-left:10px">
                </div>
                <div class="file3_3" id="androimg7" style="float:left;width:80px;height: 80px;margin-left:10px">
                </div>
                <div class="file3_3" id="androimg8" style="float:left;width:80px;height: 80px;margin-left:10px">
                </div>
                <div class="file3_3" id="androimg9" style="float:left;width:80px;height: 80px;margin-left:10px">
                </div>
            </div>
            <div style="height: 20px;"></div>
            <div class="form-group">
                <label class="col-sm-3 control-label">公告信息内容</label>
                <div class="col-sm-8">
                    <textarea class="form-control" rows="5" name="life_content"></textarea>
                </div>
            </div>
        </fieldset>
        <input type="hidden" name="who" id="who" value="">
        <div id="last_checkbox" style="display: none;">
        </div>
    </form>
    <!--判断属性：到6个改为0，不到6个改成1-->
        <input type="hidden" id="isten" value="1">
</div>
<script type="text/javascript">
    //==详情6张图==============================================
    function ddddd(file) {
        var all = 1;
        var nothing = 1;
        var eq = 0;
        var classname = 0;
        $('.mww_last_image input').each(function (index,data) {
            var param = $(this).attr('data-param');
            if(param == 0){
                if(nothing == 1){
                    classname = data.className;
                    eq = index;
                    $('#who').val(classname);
                }
                nothing++;
            }else{
                all++;
            }
        });
        var ten = $('#isten').val();
        if(ten == 0){
            alert('最多只能选择6张');
            return;
        }
        var prevDiv = document.getElementById('androimg'+classname);
        if (file.files && file.files[0])
        {
            var formData = new FormData($( "#updateForm" )[0]);//addForm是表单的id，不是input file的
            $.ajax({
                url: 'admin/Life/insertLifePic',
                data: formData,
                type: 'POST',
                async: false,//1，这四个要写上，否则点击没反应
                cache: false,//2
                contentType: false,//3
                processData: false,//4
                dataType: 'JSON',
                success: function (returnData) {
                    if(returnData.status==200){
                        $('#androimg'+classname).css('display','block');
                        $('#last_checkbox').append('<input type="checkbox" checked name="insert_image[]" value="'+returnData.msg+'" id="a'+returnData.idid+'" />');
                        var newclassname = 0;
                        var newnothing = 1;
                        $('.mww_last_image input').eq(eq).attr('data-param',1);
                        $('.mww_last_image input').each(function (index,data) {
                            var param = $(this).attr('data-param');
                            if(param == 0){
                                if(newnothing == 1){
                                    newclassname = data.className;
                                }
                                newnothing++;
                            }
                        });
                        if(all < 6){
                            $(".file"+newclassname).show();
                            $(".file"+newclassname).siblings().hide();
                        }else{
                            $('#isten').val(0);
                        }
                        var reader = new FileReader();
                        reader.onload = function(evt){
                            prevDiv.innerHTML = '<img class="mww_up'+classname+'" src="' + evt.target.result + '" height="80" width="80" onmouseover="mww_over(this);" onmouseout="mww_out(this);" />'+
                                '<div id="d'+returnData.idid+'" onmouseout="mww_out(this);" onmouseover="mww_over(this);" onclick="mww_click(this);" class="mww_del'+classname+'" style="position: relative;top: 0;height: 20px;width: 100%;line-height: 20px;text-align: center;background-color: gray;cursor: pointer;color: #FFF;display: none;">删除</div>';
                        };
                        reader.readAsDataURL(file.files[0]);
                    }else{
                        alert(returnData.msg);
                    }

                },
                error: function () {
                    alert(returnData.msg);
                }
            });
        }
        else
        {
            prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';

        }
    }
    //=========6张图end=====================

    function mww_over(self) {
        var cln = self.className;
        var num = cln.substr(cln.length-1,1);
        $('.mww_del'+num).show();
    }
    function mww_out(self) {
        var cln = self.className;
        var num = cln.substr(cln.length-1,1);
        $('.mww_del'+num).hide();
    }
    function mww_click(self) {
        var cln = self.className;
        var num = cln.substr(cln.length-1,1);
        var id = self.id;
        var idid = id.substr(1,id.length-1);
        $('.file'+num+' input').attr('data-param',0);
        $('#isten').val(1);
        $('#androimg'+num).html('');
        $('#androimg'+num).css('display','none');
        $('#a'+idid).remove();
        var newclassname = 0;
        var newnothing = 1;
        $('.mww_last_image input').each(function (index,data) {
            var param = $(this).attr('data-param');
            if(param == 0){
                if(newnothing == 1){
                    newclassname = data.className;
                }
                newnothing++;
            }
        });
        $(".file"+newclassname).show();
        $(".file"+newclassname).siblings().hide();
    }



    $(".template").on('change',function () {
        var template_val = $(this).val();
        if(template_val==1||template_val==3){
            $(".file1").show();
            $("#androimg").show();
            $(".file2,.file3").hide();
            $("#androimg1,#androimg2").hide();
        }else if(template_val==2){
            $(".file2,.file1,.file3").show();
            $("#androimg0,#androimg1,#androimg2").show();
        }
    });
    function aaaa(file) {
        var prevDiv = document.getElementById('androimg');
        if (file.files && file.files[0])
        {
            var reader = new FileReader();
            reader.onload = function(evt){
                prevDiv.innerHTML = '<img src="' + evt.target.result + '" height="150" width="150"/>';
            };
            reader.readAsDataURL(file.files[0]);
        }
        else
        {
            prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
        }
    }

    function bbbb(file) {
        var prevDiv = document.getElementById('androimg1');
        if (file.files && file.files[0])
        {
            var reader = new FileReader();
            reader.onload = function(evt){
                prevDiv.innerHTML = '<img src="' + evt.target.result + '" height="150"width="150"/>';
            };
            reader.readAsDataURL(file.files[0]);
        }
        else
        {
            prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
        }
    }
    function cccc(file) {
        var prevDiv = document.getElementById('androimg2');
        if (file.files && file.files[0])
        {
            var reader = new FileReader();
            reader.onload = function(evt){
                prevDiv.innerHTML = '<img src="' + evt.target.result + '"width="150" height="150"/>';
            };
            reader.readAsDataURL(file.files[0]);
        }
        else
        {
            prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
        }
    }

    $(".province").bind("change",function () {
        var city = $(".province").val();
        $(".area").html("");
        var html = " <option value=''>不限</option>";
        $(".area").append(html);

        getCity(city);
    });
    $(".city").on("change",function () {
        var city = $(".city").val();
        getArea(city);
    });
    function getCity(city){
        $.ajax({
            url: 'admin/Life/city',
            data: {city: city},
            type: 'POST',
            dataType: 'json',//返回的数据类型
            success: function (data) {
                var cityArray =  data.cityArray;
                $(".city").html("");
                var html = " <option value=''>不限</option>";
                $.each(cityArray, function (i, item) {
                    html += "<option value='"+item.district_id+"'>" + item.district + "</option>";
                });
                $(".city").append(html);
            }
        })
    }

    function getArea(area){
        $.ajax({
            url: 'admin/Life/area',
            data: {area: area},
            type: 'POST',
            dataType: 'json',//返回的数据类型
            success: function (data) {
                var cityArray =  data.cityArray;
                $(".area").html("");
                var html = " <option value=''>不限</option>";
                $.each(cityArray, function (i, item) {
                    html += "<option value='"+item.district_id+"'>" + item.district + "</option>";
                });
                $(".area").append(html);
            }
        })
    }
</script>




